<script setup>
import { getStudentInfoAccount, freezeOrUnfreeze } from '@/api/student.js';
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const student_data = ref([]);
const student_total = ref(0);

// 筛选条件
const filters_student = ref({
  userName: null,
  className: null,
  academy: null,
  pageNum: 1,
  pageSize: 8,
});

// 获取学生信息
const fetchStudents = async () => {
  const response = await getStudentInfoAccount(filters_student.value);
  if (response.data.code === 200) {
    student_data.value = response.data.data.rows;
    student_total.value = response.data.data.total;
  } else {
    ElMessage.error(response.data.msg);
  }
};

// 重置筛选条件
const resetFilters_student = () => {
  filters_student.value = {
    userName: null,
    className: null,
    academy: null,
    pageNum: 1,
    pageSize: 8,
  };
  fetchStudents();
};

// 冻结或解冻学生
const handleFreezeOrUnfreeze = async (userId, currentStatus) => {
  const actionText = currentStatus === 1 ? "冻结" : "解冻";
  try {
    await ElMessageBox.confirm(
        `确认要${actionText}该学生的账号吗？`,
        "提示",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: currentStatus === 1 ? "warning" : "info",
        }
    );
    const response = await freezeOrUnfreeze(userId, currentStatus === 1 ? 0 : 1);
    if (response.data.code === 200) {
      ElMessage.success(`${actionText}成功`);
      fetchStudents();
    } else {
      ElMessage.error(response.data.msg || `${actionText}失败`);
    }
  } catch {
    ElMessage.info(`${actionText}操作已取消`);
  }
};

// 分页切换
const handleStudentPageChange = (page) => {
  filters_student.value.pageNum = page;
  fetchStudents();
};

// 初始化获取学生信息
fetchStudents();
</script>

<template>
  <!-- 筛选表单 -->
  <el-form :inline="true" :model="filters_student" style="margin-left: -10px;width:100%">
    <el-form-item label="姓名">
      <el-input v-model="filters_student.userName" style="width: 140px;"></el-input>
    </el-form-item>
    <el-form-item label="学院">
      <el-input v-model="filters_student.academy" style="width: 150px;"></el-input>
    </el-form-item>
    <el-form-item label="班级">
      <el-input v-model="filters_student.className" style="width: 140px;"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="fetchStudents">查询</el-button>
      <el-button type="success" @click="resetFilters_student">重置</el-button>
    </el-form-item>
  </el-form>

  <!-- 学生信息表格 -->
  <el-table border :data="student_data" style="margin-top: 20px;">
    <el-table-column label="头像" width="80">
      <template #default="{ row }">
        <el-avatar :size="40" :src="row.avatar || 'https://via.placeholder.com/80'"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column prop="userName" label="姓名" width="100"></el-table-column>
    <el-table-column prop="academy" label="学院" width="150"></el-table-column>
    <el-table-column prop="className" label="班级" width="150"></el-table-column>
    <el-table-column prop="account" label="账号" width="150"></el-table-column>
    <el-table-column label="状态" width="100">
      <template #default="{ row }">
        <el-tag type="success" v-if="row.status === 1">正常</el-tag>
        <el-tag type="danger" v-else-if="row.status === 0">冻结</el-tag>
      </template>
    </el-table-column>
    <!-- 冻结或解冻 -->
    <el-table-column label="操作" width="180">
      <template #default="{ row }">
        <el-button
            :type="row.status === 1 ? 'danger' : 'primary'"
            @click="handleFreezeOrUnfreeze(row.userId, row.status)">
          {{ row.status === 1 ? "冻结" : "解冻" }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
      background
      layout="total, prev, pager, next"
      :current-page="filters_student.pageNum"
      :page-size="filters_student.pageSize"
      :total="student_total"
      @current-change="handleStudentPageChange"
      style="margin-top: 20px; margin-left: 300px;"
  />
</template>

<style scoped>
</style>
